<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>换肤</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			body {
				background: url(img/1.jpg) no-repeat center top;
			}
			.box {
				width: 400px;
				height: 100px;
				/*margin: 200px auto;*/
				background-color: pink;
			}
			ul {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
			}
			ul li {
				width: 100px;
				height: 100px;
				cursor: pointer;
			}
			ul li img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<img src="img/1.jpg"/>
				</li>
				<li>
					<img src="img/2.jpg"/>
				</li>
				<li>
					<img src="img/3.jpg"/>
				</li>
				<li>
					<img src="img/4.jpg"/>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			//获取对象
			var imgs = document.querySelectorAll('.box img');
			
			//遍历img伪数组添加点击事件
			for(var i = 0; i < imgs.length; i++) {
				imgs[i].onclick = function() {
					//获取到当前图片的src
					var img_src = this.src;
					//将src设置到body的背景里面去
					document.body.style.background = 'url(' + img_src+ ')';
				}
			}
		</script>
	</body>
</html>
